<template>
  <div id="echarts">
    <div class="top">
      <div id="chart1" ref="chart1" style="width: 100%;height: 300px;"></div>
    </div>
    <div class="top">
      <div id="chart2" ref="chart2" style="width: 100%;height: 300px;"></div>
    </div>
    <div class="bottom">
      <div id="chart3" ref="chart3" style="width: 33%;height: 300px;"></div>
      <div id="chart4" ref="chart4" style="width: 33%;height: 300px;"></div>
      <div id="chart5" ref="chart5" style="width: 33%;height: 300px;"></div>
    </div>
  </div>
</template>

<script>
import { getChart1, getChart2, getChart3, getChart4, getChart5} from '@/api/system/echarts'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart1: '',
      chart2: '',
      chart3: '',
      chart4: '',
      chart5: '',
      chart1xData: [],
      chart1yData: [],
      chart2xData: [],
      chart2yData: [],
      chart3Data: [],
      chart4Data: [],
      chart5xData: [],
      chart5yData: [],
    }
  },
  created() {
    this.getChart1()
    this.getChart2()
    this.getChart3()
    this.getChart4()
    this.getChart5()
  },
  mounted() {
    setTimeout(() => {
      this.initChart1()
      this.initChart2()
      this.initChart3()
      this.initChart4()
      this.initChart5()
    }, 500)
  },
  methods: {
    // 获取chart1数据
    async getChart1() {
      const res = await getChart1()
      this.chart1xData = res.data.map(item => item.name)
      this.chart1yData = res.data.map(item => item.value)
    },
    initChart1() {
      this.chart1 = echarts.init(this.$refs.chart1)
      this.chart1.setOption({
        grid: {
          left:'10%',
          right:'10%',
          containLabel: true // 确保网格包含所有标签
        },
        title: {
          text: '热门产品分析',
          left: '170px',
          textStyle: {
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'axis', // 触发类型为坐标轴触发
          axisPointer: { // 坐标轴指示器，用于指示数据点在哪个轴上
            type: 'shadow' // 指示器类型为阴影
          },
        },
        xAxis: {
          type: 'category',
          data: this.chart1xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 10,
            rotate: 60,  // 标签旋转60度
            interval: 0, // 显示所有标签
            showMinLabel: true, // 始终显示最小标签
            formatter: function(value) {
              return value.length > 5 ? value.slice(0, 5) + '...' : value;
            }
          },
        },
        yAxis: {
          axisLine: {
            show: true,
          },
        },
        series: [{
          name: '推荐量',
          type: 'bar',
          barWidth: '30%', // 柱子宽度
          barGap: '0%', // 柱子之间的间隔
          barCategoryGap: '10%', // 类目间隔
          data: this.chart1yData,
          itemStyle: {
            normal: {
              color: echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向，从底部（0,0）到顶部（0,1）
                [
                  {offset: 0, color: '#0c2d5b'},  // 顶部颜色
                  {offset: 1, color: '#e0f3f8'}, // 底部颜色
                ]
              )
            }
          },
        }],
      })
    },

    // 获取chart2数据
    async getChart2() {
      const res = await getChart2()
      this.chart2xData = res.data.x
      this.chart2yData = res.data.y
    },
    initChart2() {
      this.chart2 = echarts.init(this.$refs.chart2)
      this.chart2.setOption({
        grid: {
          left:'10%',
          right:'10%',
          containLabel: true // 确保网格包含所有标签
        },
        title: {
          text: '用户汽车推荐',
          left: '170px',
          textStyle: {
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'axis', 
          axisPointer: { 
            type: 'shadow'
          },
        },
        xAxis: {
          type: 'category',
          data: this.chart2xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 10,
            rotate: 60,  // 标签旋转60度
            interval: 0, // 显示所有标签
            showMinLabel: true, // 始终显示最小标签
            formatter: function(value) {
              return value.length > 5 ? value.slice(0, 5) + '...' : value;
            }
          },
        },
        yAxis: {
          axisLine: {
            show: true,
          },
        },
        series: [{
          name: '评分',
          type: 'bar',
          barWidth: '30%', // 柱子宽度
          barGap: '0%', // 柱子之间的间隔
          barCategoryGap: '10%', // 类目间隔
          data: this.chart2yData,
          itemStyle: {
            normal: {
              color: echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向，从底部（0,0）到顶部（0,1）
                [
                  {offset: 0, color: '#0c2d5b'},  // 顶部颜色
                  {offset: 1, color: '#e0f3f8'}, // 底部颜色
                ]
              )
            }
          },
        }],
      })
    },
    // 获取chart3数据
    async getChart3() {
      const res = await getChart3()
      this.chart3Data = res.data
    },

    initChart3() {
      this.chart3 = echarts.init(this.$refs.chart3)
      this.chart3.setOption({
        grid: {
          top: '20%', // 增加顶部空白，使饼状图向下移动
          bottom: '10%', // 可以根据需要调整底部空白
          containLabel: true
        },
        title: {
          text: '预测评分占比',
          left: 'center',
          textStyle: {
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        series: [
          {
            name: '评分',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chart3Data
          }
        ]
      })
    },
    // 获取chart4数据
    async getChart4() {
      const res = await getChart4()
      this.chart4Data = res.data
    },
    initChart4() {
      this.chart4 = echarts.init(this.$refs.chart4)
      this.chart4.setOption({
        grid: {
          top: '20%', // 增加顶部空白，使饼状图向下移动
          bottom: '10%', // 可以根据需要调整底部空白
          containLabel: true
        },
        title: {
          text: '推荐数量占比',
          left: 'center',
          textStyle: {
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '车型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chart4Data
          }
        ]
      })
    },
    // 获取chart5数据
    async getChart5() {
      const res = await getChart5()
      this.chart5xData = res.data.x
      this.chart5yData = res.data.y
      // console.log('chart5', res);
    },

    initChart5() {
      this.chart5 = echarts.init(this.$refs.chart5)
      this.chart5.setOption(
        {
        title: {
          text: '浏览次数',
          left: 'center',
          textStyle: {
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          boundaryGap : false,
          data: this.chart5xData,
          axisLabel: {
            interval: 0,
          },
          axisLine: {
            onZero: true
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
        },
        yAxis: {
          min: 0,
          type: 'value',
          axisLine: {
            onZero: true // Y 轴轴线从 X 轴的 0 点开始
          },
          axisLine: {
            show: true,
          },
        },
        series: [{
          data: this.chart5yData,
          type: 'line'
        }]
      }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
#echarts {
  width: 100%;
  height: 100%;
}
.top {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  #chart1 {
    width: 100%;
  }
  #chart2 {
    width: 100%;
  }
}
.bottom {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  #chart3 {
  width: 33%;
  }
  #chart4 {
  width: 33%;
  }
  #chart5 {
  width: 33%;
  }
}
</style>
